<template name="components">
	<view class="main-body" style="background: #F8F8FD;">
		<cu-custom :isBack="true" backRouterName="index2">
			<block slot="backText">返回</block>
			<block slot="content">{{bartitle}}</block>
		</cu-custom>
		<!-- 选择年月 -->
		<view class="cu-bar search fixed bg-white" style="52px" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form" @click="showSex = true;" style="padding-right: 10px;border: 1px solid #00a38a;">
				<input type="text" v-model="model1.userInfo.sex"
					style="padding-left:10px;flex: 1;width: 90%;color:#666666;" placeholder="选择时间" disabled></input>

				<u-icon color="#666666" name="arrow-down"></u-icon>
			</view>
			<view class="search-form" style="flex:2;padding-left:15px;border: 1px solid #00a38a;">
				<!-- <text class="cuIcon-search" style="color:#00a38a"></text> -->
				<input type="text" v-if="isShowInput" placeholder-style="color:#666666;font-size: 13px;"
					style="width: 90%;" placeholder="输入污染名称的关键词" v-model="model1.userInfo.name" @change="changeKey"
					confirm-type="search"></input>
			</view>
		</view>


		<scroll-view scroll-y class="page" style="position: absolute;" @scroll="pageScroll"
			:style="[{top:'calc('+ CustomBar + 'px + 50px)',height:'calc(100vh - '+ CustomBar + 'px - 60px)'}]">
			<u-picker :show="showSex" ref="uPicker3" @cancel="cancel(0)" keyName="name" @confirm="confirm"
				:columns="actions" @change="sexSelect"></u-picker>


			<view class="cu-card" style="margin-top:10px">
				<!-- 之前uviewi控件 -->
				<!-- <u-swipe-action ref="aa">
					<view v-show="hasData" class="bg-img shadow-blur good-li" v-for="good in goods" :key="good.id">
						<u-swipe-action-item :options="options1" @click="click(good.id,good)"
							:disabled="good.status == 2" :show="isHide" style="padding-top: 20rpx;padding-right:30upx">
							<view class="swipe-action">
								<view class="swipe-action__content">
									<view style="background: #fff;">
										<view class="item_data" @tap="goDetail(good)">
											<view class="item_1">
												<text class="good-name">污染名称</text>
												<text class="good-price" style="color:red"
													v-if="good.status==1">未上报&nbsp;></text>
												<text class="good-price" style="color: #666666;"
													v-if="good.status==2">已上报&nbsp;></text>
											</view>
											<view
												style="line-height: 25px;position: relative;width: 100%;display: flex;">
												<text class="good-text"
													v-if="good.pollutionSourceName">{{good.pollutionSourceName}}</text>
											</view>
											<view class="item_1">
												<text class="good-name">检查地点</text>
											</view>
											<view class="iconbox"
												style="line-height: 25px;position: relative;width: 100%;display: flex;">
												<text class="good-text" style="width: calc(100% - 50rpx);flex:none"
													v-if="good.address">{{good.address}}</text>
												<u-icon color="#00a38a" @tap.stop="goMap(good.address)" size="20"
													name="map-fill">
												</u-icon>
											</view>
											<view class="item_1" style="margin-top: 12px;">
												<text class="good-text">{{good.createUser }}</text>
												<text class="good-text text-right"
													v-if="good.checkedTime">{{good.checkedTime.substring(0,good.checkedTime.length-3)}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>

					</view>
				</u-swipe-action> -->
				<!-- 最新控件 -->
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-show="hasData" class="bg-img shadow-blur good-li" v-for="good in goods"
						:right-options="options1" @click="click(good.id,good,$event)" :key="good.id"
						@change="swipeChange($event, index)" :disabled="good.status == 2"
						>
						<view class="content-box">
						<!-- 	<view style="background: #fff;"> -->
								<view class="item_data" @tap="goDetail(good)">
									<view class="item_1">
										<text class="good-name">污染名称</text>
										<text class="good-price" style="color:red"
											v-if="good.status==1">未上报&nbsp;></text>
										<text class="good-price" style="color: #666666;"
											v-if="good.status==2">已上报&nbsp;></text>
										<!-- <text class="good-price"
														v-if="good.status==1">{{未上报>}}</text>-->
										<!-- <text v-if="good.status==2" class="good-price">
															{{已上报>}}</text> -->
									</view>
									<view style="line-height: 25px;position: relative;width: 100%;display: flex;">
										<!-- 	<text class="good-title">污染名称：</text> -->
										<text class="good-text"
											v-if="good.pollutionSourceName">{{good.pollutionSourceName}}</text>
									</view>
									<view class="item_1">
										<text class="good-name">检查地点</text>
									</view>
									<view class="iconbox"
										style="line-height: 25px;position: relative;width: 100%;display: flex;">
										<text class="good-text" style="width: calc(100% - 50rpx);flex:none"
											v-if="good.address">{{good.address}}</text>
										<u-icon color="#00a38a" @tap.stop="goMap(good.address)" size="20"
											name="map-fill">
										</u-icon>
										<!-- <u-icon color="#00BF62" @click.stop="goMap(good.address)" size="20"
														name="map-fill">
													</u-icon> -->
									</view>
									<view class="item_1" style="margin-top: 12px;">
										<text class="good-text">{{good.createUser }}</text>
										<text class="good-text text-right"
											v-if="good.checkedTime">{{good.checkedTime.substring(0,good.checkedTime.length-3)}}</text>
									</view>

								</view>
							<!-- </view> -->
						   <u-gap height="10" bgColor="#F8F8FD"></u-gap>
						</view>
					</uni-swipe-action-item>
				 
				</uni-swipe-action>
				<view v-show="!hasData&&hasData!== null" class="noData">
					<image src="../../static/img/nodata.png"></image>
					<view class="title">暂无数据</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- 导出 -->
		<view v-show="hasData&&isAll=='true'" class="cu-bar export fixed fixed2 bg-white"
			style="bottom:0px;padding: 8px 15px;">
			<button @tap="exportExcel" class="btnbox cu-btn" :disabled="exportloading" style="background: #1cbbb4;"
				plain="true">记录导出</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import configService from '@/common/service/config.service.js';
	import {
		ACCESS_TOKEN
	} from '@/common/util/constants.js'
	import {
		mapActions
	} from "vuex"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let apiUrl = configService.apiUrl;
	export default {
		mixins: [MescrollMixin],
		name: "components",
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				bartitle: '巡查记录',
				//接口url
				dataUrl: '/pollution/dataList',
				removeUrl: '/pollution/remove',
				showSex: false,
				show1: true,
				isHide: false,
				hasData: null,
				exportloading: false,
				rules: {},
				options1: [{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
					// , {
					//                 text: '上报',
					//                 style: {
					//                     backgroundColor: '#00a38a'
					//                 }
					//             }
				],
				model1: {
					userInfo: {
						sex: '今日',
						name: ''
					},
				},
				actions: [
					[{
							id: 1,
							name: '今日'
						},
						{
							id: 2,
							name: '当月'
						},
						{
							id: 3,
							name: '当年'
						},
						{
							id: 4,
							name: '累计'
						},

					]
				],
				goods: [


				],
				time: '1',
				userIdentity: '',
				queryType: '',
				checkTime: '',
				isAll: false,
				isShowInput: false,
			};
		},
		onShow(option) {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
			console.log("onShow调用了");
			console.log(this.$store.getters.userIdentity)
			console.log(this.CustomBar)
			console.log(this.StatusBar)

			this.userIdentity = this.$store.getters.userIdentity
			console.log(option)
			// this.getSelect();
		},
		mounted() {
			//解决uniapp组件placeholder样式初次加载不生效问题，uview无法解决只能使用uview默认颜色
			setTimeout(() => {
				this.isShowInput = true;
			}, 100);
		},

		onLoad(option) {
			console.log(this.$store.getters.userIdentity)
			console.log(this.CustomBar)
			console.log(this.StatusBar)

			this.userIdentity = this.$store.getters.userIdentity
			uni.showLoading({
				title: '加载中...',
				// mask: true
			});
			console.log(option)


			if (option.checkTime) {
				this.time = option.checkTime == 4 ? '' : option.checkTime
				this.checkTime = option.checkTime;
				if (this.time == '') {
					this.model1.userInfo.sex = '累计'
				}
				if (this.time == 1) {
					// this.bartitle = '当日巡查';
				}
			}
			if (option.status) {
				this.status = option.status
			}
			if (option.queryType) {
				this.queryType = option.queryType
			}
			if (option.isAll != '') {
				this.isAll = option.isAll
				if (option.isAll == 'true') {
					this.bartitle = '累计巡查';
				}
			}

			console.log(this.hasData, this.checkTime, this.status, this.isAll)

			this.getSelect();
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			//监听页面滚动，参数为Object
			pageScroll(e) {
				console.log(e)
				this.isHide = false;
				this.$refs['swipeAction'].closeAll();
			},
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			async goMap(add) {
				//路线规划插件方法
				// let plugin = requirePlugin('routePlan');
				// let key = 'GJ6BZ-2SLCF-MTUJV-JZS4R-BO2J2-ILFRD'; //使用在腾讯位置服务申请的key
				// let referer = '临渭区VOCs执法监管平台'; //调用插件的app的名称
				// let url =
				// 	`https://api.map.baidu.com/geocoding/v3/?address=${add}&ak=PmTFEuep7FmccxTrTn67TxRn&output=json`;
				// this.$http.get(url).then(e => {
				// 	console.log(e)
				// 	let obj = JSON.parse(JSON.stringify(e.data))
				// 	console.log(obj)
				// 	if (obj.status == 0) {
				// 		//  经纬度
				// 		let latitude = Number(obj.result.location.lat);
				// 		let longitude = Number(obj.result.location.lng);
				// 		let address = add;
				// 		let endPoint = JSON.stringify({ //终点
				// 			'name': address,
				// 			'latitude': latitude,
				// 			'longitude': longitude
				// 		});
				// 		wx.navigateTo({
				// 			url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer +
				// 				'&endPoint=' + endPoint
				// 		});

				// 	}
				// })

				//点击进入使用高德或者其他应用地图导航方法
				console.log('进入导航')
				//  经纬度
				// let latitude = Number(34.34741240037999);
				// let longitude = Number(108.96723545199005);
				// let address = '陕西省西安市未央区凤城八路';
				//https://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=您的ak&callback=showLocation //GET请求
				let url =
					`https://api.map.baidu.com/geocoding/v3/?address=${add}&ak=PmTFEuep7FmccxTrTn67TxRn&output=json`;
				this.$http.get(url).then(e => {
					console.log(e)
					let obj = JSON.parse(JSON.stringify(e.data))
					console.log(obj)
					if (obj.status == 0) {
						console.log(obj.result.location.lng)
						console.log('进入导航')
						//  经纬度
						let latitude = Number(obj.result.location.lat);
						let longitude = Number(obj.result.location.lng);
						let address = add;
						uni.openLocation({
							// 传入你要去的纬度
							latitude: latitude,
							// 传入你要去的经度
							longitude: longitude,
							// 传入你要去的地址信息 不填则为空
							address: address,
							// 缩放大小
							scale: 18,
							success: function(res) {
								console.log('成功的回调success');
								console.log(res, '经纬度===>')
							},
							// 用户拒绝获取定位后 再次点击触发
							fail: function(res) {
								console.log(res)
								if (res.errMsg == "openLocation:fail auth deny") {
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log('确定');
													}
												})
											} else {
												console.log('取消');
												return false;
											}
										}
									})
								}
							}
						});
						// 获取定位信息
						// uni.getLocation({
						// 	type: 'wgs84', //返回可以用于uni.openLocation的经纬度
						// 	// 用户允许获取定位
						// 	success: function(res) {
						// 		console.log(res, '经纬度===>')
						// 		if (res.errMsg == "getLocation:ok") {
						// 			console.log(latitude)
						// 			console.log(longitude)
						// 			uni.openLocation({
						// 				// 传入你要去的纬度
						// 				latitude: latitude,
						// 				// 传入你要去的经度
						// 				longitude: longitude,
						// 				// 传入你要去的地址信息 不填则为空
						// 				address: address,
						// 				// 缩放大小
						// 				scale: 18,
						// 				success: function() {
						// 					console.log('成功的回调success');
						// 				}
						// 			});
						// 		}
						// 	},
						// 	// 用户拒绝获取定位后 再次点击触发
						// 	fail: function(res) {
						// 		console.log(res)
						// 		if (res.errMsg == "getLocation:fail auth deny") {
						// 			uni.showModal({
						// 				content: '检测到您没打开获取信息功能权限，是否去设置打开？',
						// 				confirmText: "确认",
						// 				cancelText: '取消',
						// 				success: (res) => {
						// 					if (res.confirm) {
						// 						uni.openSetting({
						// 							success: (res) => {
						// 								console.log('确定');
						// 							}
						// 						})
						// 					} else {
						// 						console.log('取消');
						// 						return false;
						// 					}
						// 				}
						// 			})
						// 		}
						// 	}
						// });


					}

				}).catch((error) => {
					console.log(error)
				});

				// uni.navigateTo({
				// 	url: "/pages/user/location"
				// })

			},
			upCallback(page) {
				this.getSelect();
			},
			click(id, row, index) {
				console.log('click', id, index);
				if (row.status == 2) {
					this.$tip.success('已上报无法删除!')
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: res => {
						console.log(res)
						if (res.confirm) {
							this.remove(id)
							this.show1 = false
						}
					}
				})
			},
			getSelect() {
				this.goods = [];
				uni.showLoading({
					title: '加载中...',
				});
				let params = {
					pageNum: 1,
					pageSize: 1000,
					checkTime: this.time,
					status: this.status,
					queryType: this.queryType,
					keyWords: this.model1.userInfo.name
				};
				this.$http.get(this.dataUrl, {
					params: params
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					// uni.hideLoading()
					if (res.data.code == 200) {
						console.log(res.data.result)

						this.goods = res.data.result;
						if (this.goods.length == 0) {
							this.hasData = false
						} else if (this.goods.length > 0) {
							this.hasData = true
						}

					}

				}).catch((error) => {
					console.log(error)
					//  uni.showToast({
					// icon: 'none',
					// title: `${error}`
					// });
				});

			},
			// 导出附件 uni方法
			openFile(index) {
				wx.showLoading({
					title: "加载中",
					mask: true
				});

				let token = uni.getStorageSync(ACCESS_TOKEN)
				uni.downloadFile({
					url: apiUrl + '/pollution/exportExcel?checkTime=' + this.time + '&keyWords=' +this.model1.userInfo.name,
					header: {
						'X-Access-Token': token
					},
					success: function(res) {
						wx.hideLoading();
						var filePath = res.tempFilePath;
						//文件保存到本地
						uni.saveFile({
							tempFilePath: res.tempFilePath, //临时路径
							success: function(res) {
								var obj = res
								uni.showModal({
									title: '提示',
									content: '下载成功，是否打开？',
									success: res => {
										console.log(res)
										if (res.confirm) {
											//打开文档查看
											uni.openDocument({
												filePath: obj.savedFilePath,
												success: function(res) {
													console.log('打开文档成功');
												}
											});

										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						});
					}
				});
			},
			async download() {
				let url = "http://xapta.xa.gov.cn/resource/download.jspx?id=2858";
				let {
					data
				} = await this.$http.get(url).then(res => {
					if (res.data.code == 200) {}
				}).catch((error) => {
					console.log(error)
				});
				console.log(data)

			},
			//关闭picker
			cancel(index) {
				this[`showSex`] = false
			},
			// 导出附件 wx方法
			exportExcel() {
				this.exportloading = true;
				const currentDate = this.getDate({
					format: true
				})
				console.log(currentDate)
				wx.showLoading({
					title: "导出中",
					mask: true
				});
				let token = uni.getStorageSync(ACCESS_TOKEN)
				const fs = wx.getFileSystemManager()
				let filePath = `${wx.env.USER_DATA_PATH}/渭南市临渭区VOCs巡查记录-${currentDate}.xls`;
				uni.request({
					url: apiUrl + '/pollution/exportExcel?checkTime=' + this.time + '&keyWords=' +this.model1.userInfo.name,
					header: {
						'X-Access-Token': token
					},
					// 		data:prams,
					method: 'GET',
					timeout: 600000000,
					responseType: 'ArrayBuffer',
					success: (data) => {
						console.log(data)
						console.log(filePath)

						fs.writeFile({
							filePath: filePath,
							data: data.data,
							encoding: 'utf8',
							success: (res) => {
								console.log(res)
								this.exportloading = false;
								wx.hideLoading();
								wx.showModal({
									title: "导出成功",
									content: "是否打开?",
									confirmColor: "#0bc183",
									confirmText: "打开",
									success(res) {
										if (res.confirm) {
											wx.openDocument({ //打开文件
												filePath, //文件名
												showMenu: true, //右上角是否显示(...)
												success(res) {
													console.log(res);
												},
											});
										} else if (res.cancel) {

										}
									}
								});
							},
							fail(err) {
								console.log(err)
								this.exportloading = false;
								wx.hideLoading();
								this.$tip.error('文件导出失败!')
							}
						})

					}
				})
			},
			remove(id) {
				let params = {
					id: id,
				};
				this.$http.post(this.removeUrl + '?id=' + id, params).then(res => {
					console.log(res)
					// uni.hideLoading()
					if (res.data.code == 200) {
						console.log(res.data.result)
						// this.$tip.success('删除成功!')
						// this.$tip.toast('删除成功!')
						this.getSelect();

					}

				}).catch((error) => {
					console.log(error)
				});
			},
			goDetail(row) {
				if (this.exportloading == true) {
					return
				}
				console.log(row)
				uni.navigateTo({
					url: '/pages/pollution/newDetail?type=' + row.status + '&id=' + row.id
				})
			},
			goDetail2(row) {
				console.log(row)
				uni.navigateTo({
					url: "/pages/pollution/detail?type=1&id=" + row.id
				})
			},
			//u-picker确定
			confirm(e) {
				this.showSex = false;
				this.model1.userInfo.sex = e.value[0].name;
				if (this.model1.userInfo.sex == '今日') {
					this.time = 1
				} else if (this.model1.userInfo.sex == '当月') {
					this.time = 2
				} else if (this.model1.userInfo.sex == '当年') {
					this.time = 3
				} else {
					this.time = 4
				}
				this.getSelect();

			},
			changeKey() {
				this.getSelect();
			},
			//日期格式化
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

		}
	}
</script>

<style>
	.main-body {
		width: 100vw;
		height: 100vh;
		position: relative;
		background-size: 100% 100%;
	}

	.iconbox .u-icon--right {
		position: absolute;
		top: 0;
		right: 18rpx;
		bottom: 0;
		display: block;
		margin: auto;
		width: 30rpx;
		height: 30rpx;
		color: #8799a3;
		content: "\e6a3";
		text-align: center;
		font-size: 34rpx;
		font-family: cuIcon;
		line-height: 30rpx;
		margin-top: auto;
		margin-right: auto;
		margin-bottom: auto;
		margin-left: auto;
	}

	.noData {
		width: 750upx;
		margin-top: 20%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.noData image {
		width: 220upx;
		height: 220upx;
	}

	.cu-bar .search-form {
		border-radius: 5px;
		/* background-color: #f5f5f5; */
		background-color: #fff;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
	}

	.bg-green {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		color: #ffffff;
	}

	/deep/ .cu-custom {
		background-image: linear-gradient(45deg, #1cbbb4, #1cbbb4);
		color: #ffffff;
		width: 100%;
		z-index: 1024;
	}


	/deep/ .u-swipe-action-item__right {
		margin-top: 10px;
		top: 0px;
		bottom: 0px;
		right: 1px;
		margin-bottom: 10px;
		margin-right: 5px;
		position: absolute;
	}

	.good-name {
		/* font-size: 32.86upx; */
		font-size: 15px;
		font-weight: bold;
		line-height: 50upx;
		letter-spacing: 0px;
		color: #313131;
		height: 50upx;
		overflow: hidden;
	}

	.good-title {
		font-size: 28.57upx;
		/* 	line-height: 30upx; */
		color: #666666;
		display: flex;
		width: 78px;
		white-space: nowrap;
		overflow: visible;
	}

	.cu-bar.fixed2,
	.nav.fixed2 {

		top: inherit !important;
	}


	.btn-box1 {
		width: 112.86upx;
		height: 36.43upx;
		background-color: #f6e3cb;
		border-radius: 10px;
		border: solid 1px #f86c2f;
		font-size: 25.71upx;
		line-height: 16px;
		color: #f98515;
		text-align: center;
	}

	.btn-box2 {
		width: 112.86upx;
		height: 36.43upx;
		background-color: #cbf6ed;
		border-radius: 10px;
		border: solid 1px #13aa7d;
		font-size: 25.71upx;
		line-height: 16px;
		color: #23c69f;
		text-align: center;
		z-index: 999;
	}

	.weizhi {
		position: absolute;
		left: 0;
		top: 4px;
	}

	.good-price {
		/* font-size: 24.29upx; */
		font-size: 28.57upx;
		line-height: 50upx;
		letter-spacing: 0px;
		color: #00a38a;
	}

	.item_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.good-desc {
		width: calc(100% - 75px);
		padding-top: 3px;
		float: right;
		font-size: 28.57upx;
		line-height: 19px;
		min-height: 20px;
		overflow: hidden;
		color: #666666;
		/* text-overflow: ellipsis; */
		/* white-space: nowrap; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-text {
		font-size: 28.57upx;
		letter-spacing: 0px;
		color: #666666;
		/* color: #898989; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex: 1;
	}

	.btnbox {
		color: #fff !important;
		width: 100%;
		margin: 0 auto;
		font-size: 14px;
		border-radius: 5.71upx;
		border: none !important;
	}

	.good-li {
		/* padding: 0 0 0 30upx; */
		/* background-color: #fff; */
		/* margin-bottom: 10px; */
		/* border-radius: 21.43upx;
		border: 1px solid rgba(0, 0, 0, 0.1); */
	}

	.item_data {
		display: flex;
		background: #fff;
		flex-direction: column;
		width: 100%;
		min-height: 102px;
		padding: 10px 30rpx 10px 30rpx;

	}

	/deep/ .u-swipe-action-item__right {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}

	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}

	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}

	.cu-btn {
		height: 90.71rpx;
	}
</style>
